.join-container {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .join-header {
        display: flex;
        height: 60px;
        width: 100%;
        align-items: center;
        gap: 15px;
        color: #000000A6;
        font-size: 14px;
        font-weight: 400;

        .add-field {
            display: flex;
            align-items: center;
        }

        .union-field {
            display: flex;
            align-items: center;
        }

        .filter-field {
            display: flex;
            align-items: center;
        }

        .summary-field {
            display: flex;
            align-items: center;
        }
    }

    .join-body {
        width: 100%;
    }

    .join-mode-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px;
        .join-mode-title {
            font-size: 16;
        }
        .join-mode {
            display: flex;
            justify-content: space-around;
            width: 100%;

            .join-mode-mid {
                flex: 1;
                position: relative;
                cursor: pointer;
            }

            .join-mode-left,
            .join-mode-right {
                background: rgba(36, 109, 255, .1);
                border: 1px solid #1757d8;
                border-radius: 2px;
                color: rgba(0, 0, 0, .85);
                padding: 3px;
                flex: 2;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .error {
                border: 1px solid #aaa;
                color: #aaa;
                font-weight: 400;
                font-style: italic;
            }

            .ellipsis {
                white-space: nowrap;
                /* 强制文本在一行内显示 */
                overflow: hidden;
                /* 隐藏超出部分 */
                text-overflow: ellipsis;
                /* 超出部分显示省略号 */
            }
        }
    }

}

.ant-pro-card .ant-pro-card-body{
    padding-inline: 0;
}
.join-result-container {
    .join-result-table {
        width: 100%;
    }
}